import React from "react";
import { ThemeProps } from "../Icon/icon";

export interface IProgressProps {
    percent: number;
    strokeHeight?: number;
    showText?: boolean;
    styles?: React.CSSProperties;
    theme?: ThemeProps;
}
const Progress: React.FC<IProgressProps> = (props) => {
    const { percent, strokeHeight = 20, showText = true, styles, theme = "primary", } = props;
    return (
        <div className="progress-bar" style={styles}>
            <div
                className="progress-bar-outer"
                style={{ height: `${strokeHeight}px` }}
            >
                <div
                    className={`process-bar-inner  color-${theme}`}
                    style={{ width: `${percent}%` }}
                >
                    {showText && <span className="inner-text">{`${percent}%`}</span>}
                </div>
            </div>
        </div>
    );
}
export default Progress;